﻿@page "/listview/remote-data"


@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor
@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the remote data functionalities of the ListView. Click any item from the list to select and highlight it.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>DataManager</code> that acts as an interface between the service endpoint and ListView will require the following minimal information to interact with the service endpoint properly.</p>
   <p>DataManager-&gt;url - Defines the service endpoint to fetch the data.</p>
   <p>DataManager-&gt;adaptor - Defines the adaptor option. By default, the ODataAdaptor is used for remote binding.</p>
   <p>Adaptor is responsible for processing response and request from/to the service endpoint. <code>Syncfusion.Blazor.Data</code> namespace provides some predefined adaptors that are designed to interact with the particular service endpoints. They are:</p>
      <ul>
        <li>UrlAdaptor - Used to interact with any remote services. This is the base adaptor for all remote based adaptors.</li>
        <li>ODataAdaptor - Used to interact with OData endpoints.</li>
        <li>ODataV4Adaptor - Used to interact with OData V4 endpoints.</li>
        <li>WebApiAdaptor - Used to interact with Web API created under OData standards.</li>
         <li>WebMethodAdaptor - Used to interact with web methods.</li>
      </ul>
    <p>In this sample, the remote data is bound to be a collection of <b>Products</b> data as an instance of <code>DataManager</code>.</p>
                  
</ActionDescription>

<div class="col-lg-12 control-section">
    <SfListView CssClass="listview" HeaderTitle="Products" ShowHeader="true" TValue="Data" Query="@query">
        <ListViewFieldSettings TValue="Data" Id="ProductID" Text="ProductName"></ListViewFieldSettings>
        <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
    </SfListView>
</div>

@code

{

    public static List<string> column = new List<string>()
{
        "ProductID","ProductName"
    };
    Query query = new Query().From("Products").Select(column).Take(10);

    public class Data
    {
        public string ProductID { get; set; }
        public string ProductName { get; set; }
    }

}
<style>
    .listview {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>
